<template>
  <div class="detail">
    <my-header
      class="detail__header"
      :leftText="headerInfo.leftText"
      :title="headerInfo.title"
      :routerName = "headerInfo.routerName"
    ></my-header>
    <div class="detail__content">
      <div class="detail__content-headPortrait">
        <img src="@assets/images/user.jpg" alt="头像" />
      </div>
      <van-cell-group>
        <van-cell title="用户名" :value="userInfo.nickname" />
        <van-cell title="性别" :value="userInfo.gender === 0 ? '男' : '女'" />
        <van-cell title="邮箱" :value="userInfo.email" />
        <van-cell title="生日" :value="userInfo.birthday" />
        <van-cell title="地址" :value="userInfo.address" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import * as UserAPI from "@/api/userInfo";
import MyHeader from "@/components/Header";

export default {
  name: "userDetail",
  components: {
    MyHeader
  },
  data() {
    return {
      userId: this.$route.params.id || "",
      userInfo: {},
      headerInfo: {
        leftText: "返回",
        title: "用户信息",
        routerName:"/"
      }
    };
  },
  created() {
    this.queryUserInfo();
  },
  methods: {
    queryUserInfo() {
      UserAPI.queryUserById(this.userId).then((result = {}) => {
        this.userInfo = result;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  &__content {
    &-headPortrait {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        border-radius: 50%;
      }
    }
  }
}
</style>
